import {
  Button,
  Cascader,
  Checkbox,
  Input,
  message,
  Modal,
  Radio,
  Select,
  Row,
  Col,
  span,
  Popover,
} from 'antd';
import { connect } from 'dva';
import React from 'react';
import enums from '../enums';
import styles from './index.less';
import router from 'umi/router';
const { Option } = Select;

@connect(state => ({}))
export default class AddModal extends React.PureComponent {
  state = {
    submitBtnLoading: false,
    riskEventList: [],
    riskRuleName: '',
    orgId: null,
    riskEventId: undefined,
    riskEventType: null,
    riskTriggerRuleConfig: {
      vehiclePositionConfig: {
        autoReportEnable: false,
        executeConfig: {
          executeType: undefined,
          executeTime: undefined,
          executeDay: undefined,
        },
      },
      drivingRestrictionsConfig: {
        autoDrivingRestrictionsEnable: false,
        drivingRestrictionsType: undefined,
      },
      sendWarnMsgConfig: {
        autoSendWarnMsgEnable: false,
        warnChannel: '',
        warnReceiver: '',
      },
      tboxWakeUpConfig: {
        autoWakeUpEnable: false,
      },
      iviNoticeConfig: {
        autoIviNoticeEnable: false,
        iviNoticeUuid: undefined,
      },
    },
    autoLocationAuth: false,
    lockCarAuth: false,
    limpAuth: false,
    tboxWakeupAuth: false,
    warningPersionList: [],
    riskWarningMsgUuid: null,
    iviNoticeInfoList: [],
    highRiskDealer: false, //  异常事件是否是高风险经销商
  };

  componentDidMount() {
    this.handleGetriskEventList();
    this.handleGetIviNoticeList();
  }

  handleGetriskEventList = () => {
    this.props.dispatch({
      type: 'riskImpleRule/postObjWithRes',
      payload: {
        url: '/mscreditbusiness/event/page',
        curPage: 1,
        pageSize: 1000,
        enable: enums.riskEventEnable.effective.value,
      },
      callback: response => {
        if (response && response.statusCode == '0') {
          this.setState({
            riskEventList: response.data.rows,
          });
        } else {
          message.error(response.statusMessage);
        }
      },
    });
  };

  handleGetWarningPersion = orgId => {
    this.props.dispatch({
      type: 'riskImpleRule/getDataWithRes',
      payload: {
        url: '/org/accountInfo/list',
        orgId,
      },
      callback: response => {
        if (response && response.statusCode == '0') {
          this.setState({
            warningPersionList: response.data || [],
          });
        } else {
          message.error(response.statusMessage);
        }
      },
    });
  };
  // 4.8.5.1.4.	查询当前商户有效车机告警规则列表（查询场景为其他的已生效规则）
  handleGetIviNoticeList = () => {
    const params = {
      showTypes: [1, 2, 3],
      useType: 3,
      isEnable: 1,
    };
    // const showTypes = [1,2,3];
    this.props.dispatch({
      type: 'riskImpleRule/postObjWithRes',
      payload: {
        url: `/mscreditbusiness/iviNotice/list`,
        ...params,
      },
      // payload: params,
      callback: response => {
        if (response && response.statusCode == '0') {
          // if (response.data) {
          this.setState({
            iviNoticeInfoList: response.data,
          });
          //   }
          // } else {
          //   message.error(response.statusMessage);
        }
      },
    });
  };
  //4.8 获取车机告警规则里使用场景为“跛行”/“锁车”的已生效规则
  handleGetIviNoticeListForAuto = type => {
    let params = {
      showTypes: [1, 2, 3],
      useType: 1,
      isEnable: 1,
    };
    if (type === 1) {
      //锁车
      params = {
        showTypes: [1, 2, 3],
        useType: 2,
        isEnable: 1,
      };
    }
    this.props.dispatch({
      type: 'riskImpleRule/postObjWithRes',
      payload: {
        url: `/mscreditbusiness/iviNotice/list`,
        ...params,
      },
      callback: response => {
        if (response && response.statusCode == '0') {
          // if (response.data) {
          this.setState(
            {
              iviNoticeInfoList: response.data,
            },
            () => {
              const { riskTriggerRuleConfig, highRiskDealer } = this.state;
              // 高风险经销商 iviNoticeUuid默认为isSystem预设
              if (highRiskDealer) {
                const newConfig = { ...riskTriggerRuleConfig };

                newConfig.iviNoticeConfig.iviNoticeUuid = response.data?.find(
                  item => item.isSystem == 1,
                )?.uuid;
                this.setState({
                  riskTriggerRuleConfig: newConfig,
                });
              }
            },
          );
          //   }
          // } else {
          //   message.error(response.statusMessage);
        }
      },
    });
  };
  // 获取弹窗提醒及霸屏提醒规则--废弃，需求变化
  // handleGetIviNoticeListFilter = () => {
  //   const showTypes = [2,3];
  //   this.props.dispatch({
  //     type: "thirdOrgCreditVehicleRiskImpleRule/noticeList",
  //     payload: showTypes,
  //     callback: (response) => {
  //       if (response && response.statusCode == "0") {
  //         if (response.data && response.data.length > 0) {
  //           this.setState({
  //             iviNoticeInfoList: response.data,
  //           });
  //         }
  //       } else {
  //         message.error(response.statusMessage);
  //       }
  //     },
  //   });
  // };
  handleSubmit = () => {
    const { changeAddModalVisible, autoRiskData } = this.props;
    const {
      riskTriggerRuleConfig: {
        vehiclePositionConfig,
        drivingRestrictionsConfig,
        sendWarnMsgConfig,
        iviNoticeConfig,
      },
      riskRuleName,
      orgId,
      riskEventId,
      iviNoticeInfoList,
    } = this.state;

    if (!riskRuleName.trim()) {
      message.error('请输入风控规则名称');
      return;
    }

    if (!orgId) {
      message.error('请选择风控对象');
      return;
    }

    if (!riskEventId) {
      message.error('请选择风控触发事件');
      return;
    }

    if (vehiclePositionConfig.autoReportEnable) {
      if (!vehiclePositionConfig.executeConfig.executeTime) {
        message.error('请选择时间');
        return;
      }
      if (
        vehiclePositionConfig.executeConfig.executeType === enums.riskRuleExecuteType.oneWeek.value
      ) {
        if (
          !vehiclePositionConfig.executeConfig.executeDay &&
          vehiclePositionConfig.executeConfig.executeDay != 0
        ) {
          message.error('请选择日期');
          return;
        }
      }
    }

    if (drivingRestrictionsConfig.autoDrivingRestrictionsEnable) {
      if (
        !drivingRestrictionsConfig.drivingRestrictionsType &&
        drivingRestrictionsConfig.drivingRestrictionsType != 0
      ) {
        message.error('请选择行驶限制');
        return;
      }
    }

    if (sendWarnMsgConfig.autoSendWarnMsgEnable) {
      if (!sendWarnMsgConfig.warnReceiver.trim()) {
        message.error('请选择告警人员');
        return;
      }
      if (!sendWarnMsgConfig.warnChannel.trim()) {
        message.error('请选择告警方式');
        return;
      }
    }
    if (autoRiskData.vehicleAlarm == 1 && iviNoticeConfig.autoIviNoticeEnable) {
      if (!iviNoticeConfig.iviNoticeUuid) {
        message.error('请选择车机告警规则');
        return;
      }
    }
    if (autoRiskData.vehicleAlarm == 1) {
      if (
        drivingRestrictionsConfig.drivingRestrictionsType == 0 ||
        drivingRestrictionsConfig.drivingRestrictionsType == 1
      ) {
        if (iviNoticeConfig.iviNoticeUuid) {
          const arr = [];
          iviNoticeInfoList.map(d => {
            //选择了跛行或者锁车，判断目前选中的规则是否为弱提醒规则，此时iviNoticeInfoList应为只有霸屏和弹框的
            if (d.uuid == iviNoticeConfig.iviNoticeUuid) {
              // arr.length>0非弱提醒
              arr.push(d.uuid);
            }
          });
          if (arr.length == 0) {
            message.error('当前选中车机告警规则为弱提醒类型，请重新选择车机告警规则');
            return;
          }
        }
      }
    }

    let submitData = {
      riskRuleName,
      orgId,
      riskEventUuid: riskEventId,
      riskTriggerRuleConfig: this.state.riskTriggerRuleConfig,
    };
    this.setState({
      submitBtnLoading: true,
    });
    this.props.dispatch({
      type: 'riskImpleRule/postObjWithRes',
      payload: {
        url: '/mscreditbusiness/rule/save',
        ...submitData,
      },
      callback: response => {
        if (response && response.statusCode == '0') {
          message.success('操作成功');
          changeAddModalVisible(true);
          // } else {
          //   message.error(response.statusMessage);
        }
        this.setState({
          submitBtnLoading: false,
        });
      },
    });
  };

  handleRadioClick = e => {
    this.setState({
      radioValue: e.target.value,
    });
  };
  // 跳转到车机告警首页
  toSet = () => {
    router.push({
      pathname: '/creditPlatform/deviceWarningRules',
    });
  };
  // 禁用状态信息提示
  disabledInfo = () => [message.warning('车辆已实施跛行或锁车，必须给车机发送告警信息')];
  render() {
    const {
      submitBtnLoading,
      riskEventType,
      riskEventList,
      riskTriggerRuleConfig,
      riskRuleName,
      riskEventId,
      orgId,
      autoLocationAuth,
      lockCarAuth,
      limpAuth,
      warningPersionList,
      riskWarningMsgUuid,
      iviNoticeInfoList,
      highRiskDealer,
    } = this.state;

    const { changeAddModalVisible, orgOptions, autoRiskData } = this.props;
    return (
      <Modal
        title="新建风控实施规则"
        onCancel={() => changeAddModalVisible(false)}
        visible={true}
        footer={[
          <Button key="back" type="ghost" size="small" onClick={() => changeAddModalVisible(false)}>
            取消
          </Button>,
          <Button
            key="submit"
            type="primary"
            size="small"
            loading={submitBtnLoading}
            onClick={() => this.handleSubmit()}
          >
            提交
          </Button>,
        ]}
      >
        <div className={styles.addModal}>
          <div className={styles.publicItem}>
            <div className={styles.itemTitle}>请输入风控规则名称:</div>
            <div className={styles.itemContent}>
              <Input
                value={riskRuleName}
                placeholder={'请输入风控规则名称'}
                maxLength={64}
                onChange={e => {
                  this.setState({
                    riskRuleName: e.target.value,
                  });
                }}
              />
            </div>
          </div>
          <div className={styles.publicItem}>
            <div className={styles.itemTitle}>请选择风控对象:</div>
            <div className={styles.itemContent}>
              <Select
                placeholder="请选择风控对象"
                value={orgId}
                allowClear={false}
                onChange={e => {
                  const newConfig = { ...riskTriggerRuleConfig };
                  newConfig.sendWarnMsgConfig.warnReceiver = '';
                  this.setState({
                    orgId: e,
                    riskTriggerRuleConfig: newConfig,
                  });
                  this.handleGetWarningPersion(e);
                }}
              >
                {orgOptions.map(org => {
                  return (
                    <Option key={org.sid} value={org.sid}>
                      {org.orgName}
                    </Option>
                  );
                })}
              </Select>
            </div>
          </div>
          <div className={styles.publicItem}>
            <div className={styles.itemTitle}>请选择风控触发事件:</div>
            <div className={styles.itemContent}>
              <Select
                value={riskEventId}
                placeholder="请选择风控触发事件"
                onChange={e => {
                  const newConfig = { ...riskTriggerRuleConfig };
                  let findE = riskEventList.find(item => item.uuid === e);
                  this.setState({
                    highRiskDealer: findE?.riskEventType === 13,
                  });
                  newConfig.tboxWakeUpConfig.autoWakeUpEnable = false;
                  newConfig.vehiclePositionConfig.autoReportEnable = false;
                  newConfig.drivingRestrictionsConfig.autoDrivingRestrictionsEnable =
                    findE?.riskEventType === 13; //  高风险经销商 默认勾选勾选自动对车辆实施行驶限制
                  newConfig.drivingRestrictionsConfig.drivingRestrictionsType =
                    findE?.riskEventType === 13 ? 1 : undefined; //  高风险经销商 默认勾选锁车
                  newConfig.iviNoticeConfig.iviNoticeUuid = null;

                  if (findE.riskWarningMsgUuid) {
                    newConfig.sendWarnMsgConfig.autoSendWarnMsgEnable = true;
                    newConfig.sendWarnMsgConfig.warnChannel = 'stationLetter';
                    newConfig.sendWarnMsgConfig.warnReceiver = '';
                  } else {
                    newConfig.sendWarnMsgConfig.autoSendWarnMsgEnable = false;
                    newConfig.sendWarnMsgConfig.warnChannel = '';
                    newConfig.sendWarnMsgConfig.warnReceiver = '';
                  }
                  // if (findE && findE.riskEventType == enums.riskEventType.overdue.value) {
                  //   this.setState({
                  //     riskEventId: findE.uuid,
                  //     riskEventType: findE.riskEventType,
                  //     autoLocationAuth: overdueVehicle.positionAuth == 1,
                  //     lockCarAuth: overdueVehicle.lockAuth == 1,
                  //     limpAuth: overdueVehicle.limpAuth == 1,
                  //     tboxWakeupAuth: allVehicle.tboxWakeupAuth == 1,
                  //     riskTriggerRuleConfig: newConfig,
                  //     riskWarningMsgUuid: findE.riskWarningMsgUuid,
                  //   });
                  // } else {
                  //   this.setState({
                  //     riskEventId: findE.uuid,
                  //     riskEventType: findE.riskEventType,
                  //     autoLocationAuth: riskVehicle.positionAuth == 1,
                  //     lockCarAuth: riskVehicle.lockAuth == 1,
                  //     limpAuth: riskVehicle.limpAuth == 1,
                  //     tboxWakeupAuth: allVehicle.tboxWakeupAuth == 1,
                  //     riskTriggerRuleConfig: newConfig,
                  //     riskWarningMsgUuid: findE.riskWarningMsgUuid,
                  //   });
                  // }
                  if (findE?.riskEventType === 13) {
                    //  高风险经销商 场景锁车，拉取锁车的车机告警
                    this.handleGetIviNoticeListForAuto(1);
                  }
                  this.setState({
                    riskEventId: findE.uuid,
                    riskEventType: findE.riskEventType,
                    autoLocationAuth: autoRiskData?.realtimePositioning == 1,
                    lockCarAuth: autoRiskData?.vehicleLock == 1,
                    limpAuth: autoRiskData?.vehicleLimp == 1,
                    tboxWakeupAuth: autoRiskData?.remoteWakeup == 1,
                    riskTriggerRuleConfig: newConfig,
                    riskWarningMsgUuid: findE.riskWarningMsgUuid,
                  });
                }}
              >
                {riskEventList.map(e => {
                  return (
                    <Option key={e.uuid} value={e.uuid}>
                      {e.riskEventContent}
                    </Option>
                  );
                })}
              </Select>
            </div>
          </div>

          <div className={styles.publicItem}>
            <div className={styles.itemTitle}>请选择风控实施规则:</div>
            <div className={styles.itemContentRule}>
              {autoRiskData?.remoteWakeup && riskEventType == enums.riskEventType.loss.value ? (
                <div className={styles.checkboxTboxWakeUp}>
                  <div className={styles.checkboxTitle}>
                    <Checkbox
                      onChange={e => {
                        const newConfig = { ...riskTriggerRuleConfig };
                        newConfig.tboxWakeUpConfig.autoWakeUpEnable = e.target.checked;
                        this.setState({
                          riskTriggerRuleConfig: newConfig,
                        });
                      }}
                      checked={riskTriggerRuleConfig.tboxWakeUpConfig.autoWakeUpEnable}
                    ></Checkbox>
                    <div className={styles.titleValue}>自动对TBOX进行远程唤醒</div>
                  </div>
                </div>
              ) : null}

              <div
                style={{
                  display:
                    autoLocationAuth &&
                    riskEventType != null &&
                    riskEventType !== enums.riskEventType.loss.value
                      ? ''
                      : 'none',
                }}
                className={styles.checkboxAutoPositionCar}
              >
                <div className={styles.checkboxTitle}>
                  <Checkbox
                    onChange={e => {
                      const newConfig = { ...riskTriggerRuleConfig };
                      newConfig.vehiclePositionConfig.autoReportEnable = e.target.checked;
                      if (e.target.checked) {
                        newConfig.vehiclePositionConfig.executeConfig.executeType =
                          enums.riskRuleExecuteType.oneDay.value;
                        newConfig.vehiclePositionConfig.executeConfig.executeTime = '08:30';
                        newConfig.vehiclePositionConfig.executeConfig.executeDay = undefined;
                      } else {
                        newConfig.vehiclePositionConfig.executeConfig.executeType = undefined;
                        newConfig.vehiclePositionConfig.executeConfig.executeTime = undefined;
                        newConfig.vehiclePositionConfig.executeConfig.executeDay = undefined;
                      }
                      this.setState({
                        riskTriggerRuleConfig: newConfig,
                      });
                    }}
                    checked={riskTriggerRuleConfig.vehiclePositionConfig.autoReportEnable}
                  ></Checkbox>
                  <div className={styles.titleValue}>自动对车辆进行实时定位</div>
                </div>
                <div className={styles.positionTime}>
                  <div className={styles.positionTimeTitle}>请选择定位时间</div>
                  <div className={styles.positionTimeValue}>
                    <Radio.Group
                      value={riskTriggerRuleConfig.vehiclePositionConfig.executeConfig.executeType}
                      onChange={e => {
                        const newConfig = { ...riskTriggerRuleConfig };
                        newConfig.vehiclePositionConfig.executeConfig.executeType = e.target.value;
                        this.setState({
                          riskTriggerRuleConfig: newConfig,
                        });
                      }}
                    >
                      <div className={styles.positionTimeValueItem}>
                        <div className={styles.radioItem}>
                          <Radio value={enums.riskRuleExecuteType.oneDay.value}>每天一次</Radio>
                        </div>
                        <div className={styles.selectItem}>
                          <Select
                            placeholder="请选择时间"
                            disabled={
                              riskTriggerRuleConfig.vehiclePositionConfig.executeConfig
                                .executeType !== enums.riskRuleExecuteType.oneDay.value
                            }
                            value={
                              riskTriggerRuleConfig.vehiclePositionConfig.executeConfig.executeTime
                            }
                            onChange={e => {
                              const newConfig = { ...riskTriggerRuleConfig };
                              newConfig.vehiclePositionConfig.executeConfig.executeTime = e;
                              this.setState({
                                riskTriggerRuleConfig: newConfig,
                              });
                            }}
                          >
                            {Array.from({ length: 24 }).map((item, index) => {
                              let value = '';
                              if (index < 10) {
                                value = `0${index}:30`;
                              } else {
                                value = `${index}:30`;
                              }
                              return (
                                <Option key={value} value={value}>
                                  {value}
                                </Option>
                              );
                            })}
                          </Select>
                        </div>
                      </div>
                      <div className={styles.positionTimeValueItem}>
                        <div className={styles.radioItem}>
                          <Radio value={enums.riskRuleExecuteType.oneWeek.value}>每周一次</Radio>
                        </div>
                        <div className={styles.selectItem}>
                          <Select
                            placeholder="请选择日期"
                            disabled={
                              riskTriggerRuleConfig.vehiclePositionConfig.executeConfig
                                .executeType !== enums.riskRuleExecuteType.oneWeek.value
                            }
                            value={
                              riskTriggerRuleConfig.vehiclePositionConfig.executeConfig.executeDay
                            }
                            onChange={e => {
                              const newConfig = { ...riskTriggerRuleConfig };
                              newConfig.vehiclePositionConfig.executeConfig.executeDay = e;
                              this.setState({
                                riskTriggerRuleConfig: newConfig,
                              });
                            }}
                          >
                            <Option value={1}>周一</Option>
                            <Option value={2}>周二</Option>
                            <Option value={3}>周三</Option>
                            <Option value={4}>周四</Option>
                            <Option value={5}>周五</Option>
                            <Option value={6}>周六</Option>
                            <Option value={0}>周日</Option>
                          </Select>
                        </div>
                        <div className={styles.selectItem}>
                          <Select
                            placeholder="请选择时间"
                            disabled={
                              riskTriggerRuleConfig.vehiclePositionConfig.executeConfig
                                .executeType !== enums.riskRuleExecuteType.oneWeek.value
                            }
                            value={
                              riskTriggerRuleConfig.vehiclePositionConfig.executeConfig.executeTime
                            }
                            onChange={e => {
                              const newConfig = { ...riskTriggerRuleConfig };
                              newConfig.vehiclePositionConfig.executeConfig.executeTime = e;
                              this.setState({
                                riskTriggerRuleConfig: newConfig,
                              });
                            }}
                          >
                            {Array.from({ length: 24 }).map((item, index) => {
                              let value = '';
                              if (index < 10) {
                                value = `0${index}:30`;
                              } else {
                                value = `${index}:30`;
                              }
                              return (
                                <Option key={value} value={value}>
                                  {value}
                                </Option>
                              );
                            })}
                          </Select>
                        </div>
                      </div>
                    </Radio.Group>
                  </div>
                </div>
              </div>
              <div
                style={{
                  display:
                    (lockCarAuth || limpAuth) &&
                    riskEventType != null &&
                    riskEventType !== enums.riskEventType.loss.value
                      ? ''
                      : 'none',
                }}
                className={styles.checkboxAutoControlCar}
              >
                <div className={styles.checkboxTitle}>
                  <Checkbox
                    onChange={e => {
                      const newConfig = { ...riskTriggerRuleConfig };
                      newConfig.drivingRestrictionsConfig.autoDrivingRestrictionsEnable =
                        e.target.checked;
                      newConfig.iviNoticeConfig.iviNoticeUuid = null;
                      if (e.target.checked) {
                        newConfig.drivingRestrictionsConfig.drivingRestrictionsType = limpAuth
                          ? enums.riskRuleDrivingRestrictionsType.limp.value
                          : enums.riskRuleDrivingRestrictionsType.locak.value;
                        newConfig.iviNoticeConfig.autoIviNoticeEnable = e.target.checked;
                        if (limpAuth) {
                          //跛行 仅显示车机告警规则里使用场景为“跛行”的已生效规则
                          this.handleGetIviNoticeListForAuto();
                        } else {
                          //锁车 仅显示车机告警规则里使用场景为“锁车”的已生效规则
                          this.handleGetIviNoticeListForAuto(1);
                        }
                        // this.handleGetIviNoticeListFilter()
                      } else {
                        newConfig.drivingRestrictionsConfig.drivingRestrictionsType = undefined;
                        this.handleGetIviNoticeList();
                      }
                      this.setState({
                        riskTriggerRuleConfig: newConfig,
                      });
                    }}
                    checked={
                      riskTriggerRuleConfig.drivingRestrictionsConfig.autoDrivingRestrictionsEnable
                    }
                    disabled={highRiskDealer}
                  ></Checkbox>
                  <div className={styles.titleValue}>自动对车辆实施行驶限制</div>
                </div>
                <div className={styles.checkboxValue}>
                  <Radio.Group
                    value={riskTriggerRuleConfig.drivingRestrictionsConfig.drivingRestrictionsType}
                    onChange={e => {
                      console.log('radioe', e);
                      const newConfig = { ...riskTriggerRuleConfig };
                      newConfig.drivingRestrictionsConfig.drivingRestrictionsType = e.target.value;
                      newConfig.iviNoticeConfig.iviNoticeUuid = null;
                      if (e.target.checked) {
                        newConfig.iviNoticeConfig.autoIviNoticeEnable = true;
                        if (e.target.value === 1) {
                          //锁车 仅显示车机告警规则里使用场景为“锁车”的已生效规则
                          this.handleGetIviNoticeListForAuto(1);
                        } else {
                          //跛行 仅显示车机告警规则里使用场景为“跛行”的已生效规则
                          this.handleGetIviNoticeListForAuto();
                        }
                        // this.handleGetIviNoticeListFilter()
                      } else {
                        this.handleGetIviNoticeList();
                      }
                      this.setState({
                        riskTriggerRuleConfig: newConfig,
                      });
                    }}
                    disabled={highRiskDealer}
                  >
                    {limpAuth ? (
                      <Radio value={enums.riskRuleDrivingRestrictionsType.limp.value}>跛行</Radio>
                    ) : null}
                    {lockCarAuth ? (
                      <Radio value={enums.riskRuleDrivingRestrictionsType.locak.value}>锁车</Radio>
                    ) : null}
                  </Radio.Group>
                </div>
              </div>
              <div
                className={styles.checkboxSendInfo}
                style={{ display: riskWarningMsgUuid ? '' : 'none' }}
              >
                <div className={styles.checkboxTitle}>
                  <Checkbox
                    onChange={e => {
                      const newConfig = { ...riskTriggerRuleConfig };
                      newConfig.sendWarnMsgConfig.autoSendWarnMsgEnable = e.target.checked;
                      if (e.target.checked) {
                        newConfig.sendWarnMsgConfig.warnReceiver = '';
                        newConfig.sendWarnMsgConfig.warnChannel = 'stationLetter';
                      } else {
                        newConfig.sendWarnMsgConfig.warnReceiver = '';
                        newConfig.sendWarnMsgConfig.warnChannel = '';
                      }
                      this.setState({
                        riskTriggerRuleConfig: newConfig,
                      });
                    }}
                    checked={riskTriggerRuleConfig.sendWarnMsgConfig.autoSendWarnMsgEnable}
                  ></Checkbox>
                  <div className={styles.titleValue}>自动给管理人员发送告警信息</div>
                </div>
                <div className={styles.sendPerson}>
                  <div className={styles.sendPersonTitle}>请选择要告警的人员</div>
                  <div className={styles.sendPersonValue}>
                    <Select
                      showArrow
                      placeholder="请选择告警人员"
                      value={
                        riskTriggerRuleConfig.sendWarnMsgConfig.warnReceiver
                          ? riskTriggerRuleConfig.sendWarnMsgConfig.warnReceiver.split(',')
                          : []
                      }
                      mode="multiple"
                      maxTagCount={2}
                      onChange={e => {
                        const newConfig = { ...riskTriggerRuleConfig };
                        newConfig.sendWarnMsgConfig.warnReceiver = e.toString();
                        this.setState({
                          riskTriggerRuleConfig: newConfig,
                        });
                      }}
                    >
                      {warningPersionList.map(persion => {
                        return (
                          <Option key={persion.opUser} value={persion.opUser}>
                            {persion.opUser}
                          </Option>
                        );
                      })}
                    </Select>
                  </div>
                </div>
                <div className={styles.sendWay}>
                  <div className={styles.sendWayTitle}>请选择告警方式</div>
                  <div className={styles.sendWayValue}>
                    <Checkbox.Group
                      onChange={e => {
                        const newConfig = { ...riskTriggerRuleConfig };
                        newConfig.sendWarnMsgConfig.warnChannel = e.toString();
                        this.setState({
                          riskTriggerRuleConfig: newConfig,
                        });
                      }}
                      value={
                        riskTriggerRuleConfig.sendWarnMsgConfig.warnChannel
                          ? riskTriggerRuleConfig.sendWarnMsgConfig.warnChannel.split(',')
                          : []
                      }
                    >
                      {enums.riskRuleWarnChannel.array.map(item => {
                        return (
                          <Checkbox key={item.value} value={item.value}>
                            {item.label}
                          </Checkbox>
                        );
                      })}
                    </Checkbox.Group>
                  </div>
                </div>
              </div>
              {autoRiskData.vehicleAlarm == 1 && (
                <div className={styles.checkboxTboxWakeUp}>
                  <div className={styles.checkboxTitle}>
                    <span
                      onClick={() => {
                        if (
                          typeof riskTriggerRuleConfig.drivingRestrictionsConfig
                            .drivingRestrictionsType == 'undefined' ||
                          riskTriggerRuleConfig.drivingRestrictionsConfig.drivingRestrictionsType ==
                            null
                        ) {
                          return;
                        } else {
                          this.disabledInfo();
                        }
                      }}
                    >
                      <Checkbox
                        style={
                          typeof riskTriggerRuleConfig.drivingRestrictionsConfig
                            .drivingRestrictionsType == 'undefined' ||
                          riskTriggerRuleConfig.drivingRestrictionsConfig.drivingRestrictionsType ==
                            null
                            ? {}
                            : { pointerEvents: 'none' }
                        }
                        onChange={e => {
                          const newConfig = { ...riskTriggerRuleConfig };
                          newConfig.iviNoticeConfig.autoIviNoticeEnable = e.target.checked;
                          this.setState({
                            riskTriggerRuleConfig: newConfig,
                          });
                        }}
                        checked={
                          riskTriggerRuleConfig.iviNoticeConfig.autoIviNoticeEnable ||
                          riskTriggerRuleConfig.drivingRestrictionsConfig.drivingRestrictionsType ==
                            1 ||
                          riskTriggerRuleConfig.drivingRestrictionsConfig.drivingRestrictionsType ==
                            0
                        }
                        disabled={
                          typeof riskTriggerRuleConfig.drivingRestrictionsConfig
                            .drivingRestrictionsType == 'undefined' ||
                          riskTriggerRuleConfig.drivingRestrictionsConfig.drivingRestrictionsType ==
                            null
                            ? false
                            : true
                        }
                      ></Checkbox>
                    </span>
                    <div style={{ marginLeft: 3 }}>自动给车机发送告警信息</div>
                  </div>
                  <div className={styles.sendPerson}>
                    <div className={styles.sendPersonTitle}>请选择车机告警规则：</div>
                    <div className={styles.sendPersonValue}>
                      <Select
                        style={{ width: 250 }}
                        showArrow
                        placeholder="请选择车机告警规则"
                        value={
                          riskTriggerRuleConfig.iviNoticeConfig.iviNoticeUuid
                            ? riskTriggerRuleConfig.iviNoticeConfig.iviNoticeUuid
                            : ''
                        }
                        onChange={e => {
                          const newConfig = { ...riskTriggerRuleConfig };
                          newConfig.iviNoticeConfig.iviNoticeUuid = e;
                          this.setState({
                            riskTriggerRuleConfig: newConfig,
                          });
                        }}
                        disabled={highRiskDealer}
                      >
                        {iviNoticeInfoList.map(d => {
                          return (
                            <Option key={d.uuid} value={d.uuid}>
                              {d.name}
                            </Option>
                          );
                        })}
                      </Select>
                      <Button type="link" onClick={this.toSet}>
                        <u>去新建规则</u>
                      </Button>
                    </div>
                  </div>
                  <div style={{ color: 'red', marginTop: 10, fontSize: 'small' }}>
                    <Row>
                      <Col span={3}>
                        <span>注意：</span>
                      </Col>
                      <Col span={21}>
                        <span>1. 若车辆已实施跛行或锁车，则必须发送车机告警</span>
                      </Col>
                    </Row>
                    <Row>
                      <Col span={3}>
                        <span></span>
                      </Col>
                      <Col span={21}>
                        <span>2. 若车辆已实施跛行或锁车，则车机告警规则不能使用弱提醒</span>
                      </Col>
                    </Row>
                  </div>
                </div>
              )}
            </div>
          </div>
        </div>
      </Modal>
    );
  }
}
